<template>
    <div class="content">
        <van-form class="conform" @submit="onSubmit">
            <van-field :value="this.$store.state.city" name="city" right-icon="aim" readonly />
            <van-field readonly clickable name="startTime" :value="stayT"
                       placeholder="入住日期" @click="stayTime = true"/>
            <van-calendar v-model="stayTime" type="range" @confirm="onConfirm" :formatter="formatter" />
            <van-field name="keySearch" v-model="keySearch" placeholder="关键字/位置/品牌/名称" />

            <van-field clickable name="priceStart" :value="priceStarOne"
                       placeholder="价格/星级" @click="stayS(priceStarOne)"/>

            <van-popup v-model="staySelect" position="bottom">
                <van-form class="priceStar" @submit="starSubmit">
                    <div class="price">
                        <div class="priceUp">
                            <p>价格</p>
                        </div>
                        <div class="priceDown">
                            <van-slider v-model="price" range @change="onChange" />
                        </div>
                    </div>
                    <div class="star">
                        <div class="starUp">
                            <p>星级</p>
                        </div>
                        <div class="starDown">
                            <van-row type="flex" justify="space-around">
                                <van-col v-for="(item,index) in starData" :key="index" @click="starBefore(index,item)"
                                         span="6" >
                                    <div :class=" item.isCheck === true ? 'starDownAfter':'starDownBefore'">
                                        <p style="margin-top: .1rem; margin-bottom: .1rem">{{item.star}}</p>
                                        <p>{{item.category}}</p>
                                    </div>
                                </van-col>
                            </van-row>
                        </div>
                    </div>
                    <div class="selectBtn">
                        <van-button type="default" size="small" class="reset" @click="reset">重   置</van-button>
                        <van-button type="info" size="small" class="submit" @click="priceStar">确    定</van-button>
                    </div>
                </van-form>
            </van-popup>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    import {dateFormat} from '@/utils/utils.js'
    import {Toast} from 'vant'
    import axios from 'axios'
    export default {
        name: "StayContent",
        data() {
            return {
                stayT: '',
                endT: '',
                stayTime: false,
                startPicker: false,
                endPicker: false,
                staySelect: false,
                startDate: new Date(),
                endDate: '',
                price: [10, 50],
                priceStart: '',
                starStart: '',
                priceEnd: '',
                starData: [],
                starArr: [],
                priceStarOne: '',
                keySearch:''
            };
        },
        methods: {
            // 弹出层星级选择
            starBefore(index, item){
                let star = this.starData;
                let starArr = [...this.starArr];

                if (star[index].isCheck == false) {
                    star[index].isCheck = true;
                    starArr.push(star[index].star+"/"+star[index].category);
                } else {
                    star[index].isCheck = false;
                    let test = star[index].star+"/"+star[index].category;
                    console.log(starArr.length)
                    for (let i=0; i<starArr.length; i++){
                        if (starArr[i] == test){
                          starArr.splice(i,1)
                        }
                    }
                    // var starO = starArr.indexOf(index)+1;
                }
                this.starData = star;
                // 星级选择后排序
                let one = starArr.sort(function (a,b){
                  return (a+'').localeCompare(b+'');
                })

                this.starArr = one;
                // console.log(starArr)
            },
            onSubmit(values) {
                console.log('submit', values);
            },
            onStart(){
                let start = dateFormat("yyyy-MM-dd",this.startDate);
                this.startT = start;
                this.startPicker = false;
            },
            onEnd(){
                let end = dateFormat("yyyy-MM-dd",this.endDate);
                this.endT = end;
                this.endPicker = false;
            },
            onChange(price){
                // this.priceStart = this.price[0];
                // this.priceEnd = this.price[1];
                if (price){
                    let price = new Array();

                    price.push('￥'+ this.price[0]);
                    price.push(this.price[1]);
                    let priceNew = price.join('-');
                    this.priceStart = priceNew;
                }
                Toast("当前值："+this.price[0])
            },
            starSubmit(){

            },
            formatDate(stayT){
                return `${stayT.getMonth() + 1}/${stayT.getDate()}`;
            },
            // 选择入住时间
            onConfirm(stayT) {
                const [start, end] = stayT;
                this.stayTime = false;
                this.stayT = `${this.formatDate(start)} - ${this.formatDate(end)}`;
            },
            // 日期选择样式
            formatter(day) {
                const month = day.date.getMonth() + 1;
                const date = day.date.getDate();

                if (day.type === 'start') {
                    day.bottomInfo = '入住';
                } else if (day.type === 'end') {
                    day.bottomInfo = '离店';
                }

                return day;
            },
            stayS(val){

                for (let i=0; i<4; i++){
                  this.starData
                }
                console.log(this.priceStarOne)
                this.staySelect = true;
                this.star(val);
            },
            star(val){
                axios.get("data/star.json").then(res=>{
                    this.starData = res.data;
                    let num = val.split('、').length - 1

                    // 根据输入框中的值进行星级选择显示
                    for (let value of val.split('、')) {
                        if ( val != '' && value === '二星及以下/经济'){
                          this.starData[0].isCheck = true
                        }
                        if ( val != '' && value === '三星(钻)/舒适'){
                          this.starData[1].isCheck = true
                        }
                        if ( val != '' && value === '四星(钻)/高档'){
                          this.starData[2].isCheck = true
                        }
                        if ( val != '' && value === '五星(钻)/豪华'){
                          this.starData[3].isCheck = true
                        }
                    }
                })
            },
            priceStar() {
                let priceStarO = new Array();
                let starArr = [...this.starArr]
                let priceArr = this.priceStart;

                priceStarO.push(starArr.join('、'));
                priceStarO.push(priceArr);
                let priceStarNew = priceStarO.join('、');

                if (priceArr === null || priceArr === ''){
                  let priceStarNew = priceStarO.join('')
                  this.priceStarOne = priceStarNew.replace(/\"/g,"");
                } else {
                  this.priceStarOne = priceStarNew.replace(/\"/g,"");
                }
                // 去除数组左右两边的引号
                this.staySelect = false;
            },
            reset(){
                for (let i = 0; i<=3; i++){
                  this.starData[i].isCheck = false
                }
                this.priceStarOne = ''
                this.starArr = ''
                this.priceStart = ''
            }
        },
    }
</script>

<style scoped>
.van-field__body, >>> .van-field__control{
    font-size: 18px;
}
.van-field__body, >>> .van-field__right-icon, >>> .van-icon{
    font-size: 18px;
    color: #1989fa;
}
.content{
    position: relative;
    width: 94%;
    height: 300px;
    left: 3%;
    margin-top: 2%;
    border-radius: 25px;
    box-shadow: 0 0.128rem 0.384rem rgba(0, 0, 0, 0.08);
}
.priceStar{
    padding: .2rem;
}
.price{
    width: 100%;
    margin-bottom: .5rem;
}
.priceUp, .starUp{
    margin-top: .3rem;
    margin-bottom: .5rem;
    font-size: 18px;
    font-weight: 700;
}
.priceDown{
    position: relative;
    left: 5%;
    width: 90%;
}
.starDownBefore, .starDownAfter{
    background-color: #f0f1f2;
    border: 1px solid #f0f1f2;
    border-radius: 5px;
    height: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 4%;
    margin-right: 4%;
}
.starDownAfter{
    background-color: #e7f3ff;
    color: #0086f6;
}
.selectBtn{
    position: relative;
    margin-top: .5rem;
}
.reset{
    margin-right: 10%;
}
.submit, .reset{
    width: 45%;
    font-size: 18px;
}

</style>